import { Modal, Tag, Image, Space } from "antd";
import { TaskSubmitRecord } from "@/api/services/taskService";
import dayjs from "dayjs";

interface UserDetailModalProps {
	open: boolean;
	record: TaskSubmitRecord | null;
	onClose: () => void;
}

const UserDetailModal = ({ open, record, onClose }: UserDetailModalProps) => {
	const user = record?.user;

	return (
		<Modal
			title="用户详情"
			open={open}
			onCancel={onClose}
			footer={null}
			width={800}
		>
			{user && (
				<div className="space-y-4">
					<div className="flex items-center">
						<span className="w-24 font-medium">用户名：</span>
						<span className="text-gray-900">{user.username}</span>
					</div>
					<div className="flex items-center">
						<span className="w-24 font-medium">昵称：</span>
						<span className="text-gray-900">{user.nickname || "-"}</span>
					</div>
					<div className="flex items-center">
						<span className="w-24 font-medium">手机号：</span>
						<span className="text-gray-900">{user.mobile || "-"}</span>
					</div>
					<div className="flex items-center">
						<span className="w-24 font-medium">邮箱：</span>
						<span className="text-gray-900">{user.email || "-"}</span>
					</div>
					<div className="flex items-center">
						<span className="w-24 font-medium">公司：</span>
						<span className="text-gray-900">{user.company || "-"}</span>
					</div>
					<div className="flex items-center">
						<span className="w-24 font-medium">支付宝账号：</span>
						<span className="text-gray-900">{user.alipay_account || "-"}</span>
					</div>
					<div className="flex items-center">
						<span className="w-24 font-medium">状态：</span>
						<Tag color={user.status === 1 ? "success" : "error"}>
							{user.status === 1 ? "正常" : "禁用"}
						</Tag>
					</div>
					<div className="flex items-center">
						<span className="w-24 font-medium">注册时间：</span>
						<span className="text-gray-900">
							{user.createtime
								? dayjs(user.createtime * 1000).format("YYYY-MM-DD HH:mm:ss")
								: "-"}
						</span>
					</div>
					<div className="flex items-center">
						<span className="w-24 font-medium">最后登录：</span>
						<span className="text-gray-900">
							{user.lastlogintime
								? dayjs(user.lastlogintime * 1000).format("YYYY-MM-DD HH:mm:ss")
								: "-"}
						</span>
					</div>
					{user.remark && (
						<div className="flex items-center">
							<span className="w-24 font-medium">备注：</span>
							<span className="text-gray-900">{user.remark}</span>
						</div>
					)}
					<div className="flex items-start">
						<span className="w-24 font-medium mt-1">营业执照：</span>
						<div>
							{user.business_license_img ? (
								<Image
									src={user.business_license_img}
									alt="营业执照"
									width={200}
									className="object-contain"
								/>
							) : (
								<span className="text-gray-900">-</span>
							)}
						</div>
					</div>
					<div className="flex items-start">
						<span className="w-24 font-medium mt-1">工作室门头照：</span>
						<div>
							{user.website_logo ? (
								<Image
									src={user.website_logo}
									alt="工作室门头照"
									width={200}
									className="object-contain"
								/>
							) : (
								<span className="text-gray-900">-</span>
							)}
						</div>
					</div>
					<div className="flex items-start">
						<span className="w-24 font-medium mt-1">微信二维码：</span>
						<div>
							{user.wechat_qr_code_img ? (
								<Image
									src={user.wechat_qr_code_img}
									alt="微信二维码"
									width={200}
									className="object-contain"
								/>
							) : (
								<span className="text-gray-900">-</span>
							)}
						</div>
					</div>
					<div className="flex items-start">
						<span className="w-24 font-medium mt-1">支付宝二维码：</span>
						<div>
							{user.alipay_qr_code_img ? (
								<Image
									src={user.alipay_qr_code_img}
									alt="支付宝二维码"
									width={200}
									className="object-contain"
								/>
							) : (
								<span className="text-gray-900">-</span>
							)}
						</div>
					</div>
				</div>
			)}
		</Modal>
	);
};

export default UserDetailModal;
